<!--
 *@description:
 *@author: Xhd
 *@date: 2023-05-11 10:57:45
-->
<template>
  <div class="app-container">
    <TheTable
      height="600"
      :tableOption="tableOption"
      :pageNo.sync="pageNo"
      :limit.sync="limit"
      :api="queryPageApi"
      :queryParams="queryParams"
      :selection="false"
      selectionKey="orderCode"
      :isMerge="true"
      :mergeColumn="mergeColumn"
    />
  </div>
</template>

<script>
import { queryPageApi } from "@/api/productManager/materialSku.js";

export default {
  data() {
    return {
      tableOption: [
        {
          label: "序号",
          prop: "index",
          formatter(row) {
            return row.rowIndex;
          },
        },
        {
          label: "编号",
          prop: "stockSpuId",
          editable: true,
          render(createElement, params) {
            let dom = null;
            switch (params.row.dyingState) {
              case 1:
                dom = (
                  <el-tag type="success" effect="plain">
                    正常
                  </el-tag>
                );
                break;
              case 2:
                dom = (
                  <el-tag type="danger" effect="plain">
                    临期
                  </el-tag>
                );
                break;
              case 3:
                dom = (
                  <el-tag
                    color="#fff"
                    style="color:#BA1000;border-color:#BA1000"
                    effect="plain"
                  >
                    禁售
                  </el-tag>
                );
                break;
              case 4:
                dom = (
                  <el-tag
                    color="#fff"
                    style="color:#CC0BD4;border-color:#CC0BD4"
                    effect="plain"
                  >
                    已处理
                  </el-tag>
                );
                break;
              case 5:
                dom = (
                  <el-tag
                    color="#fff"
                    style="color:#000000;border-color:#000000"
                    effect="plain"
                  >
                    已售完
                  </el-tag>
                );
                break;
              default:
                dom = <div></div>;
                break;
            }
            return dom;
          },
        },
        {
          label: "物料SPU编码",
          prop: "stockSpuCode",
          editable: true,
        },
        {
          label: "123",
          prop: "selection",
          columnType: "selection",
        },
        {
          label: "物料SPU名称",
          prop: "stockSpuName",
          render(createElement, params) {
            const { row } = params;
            const _this = this;
            return createElement(
              "div",
              {
                style: {
                  width: "100%",
                  display: "flex",
                  justifyContent: "center",
                  flexWrap: "wrap",
                },
              },
              [
                row.stockSpuName
                  ? createElement(
                      "el-popover",
                      {
                        props: {
                          placement: "right-start",
                          trigger: "hover",
                        },
                      },
                      [
                        createElement("el-image", {
                          style: {
                            width: "50px",
                            height: "50px",
                          },
                          props: {
                            fit: "contain",
                            lazy: true,
                            src: require("@/assets/images/finish.png"),
                          },
                          slot: "reference",
                        }),
                        createElement("el-image", {
                          style: {
                            width: "220px",
                            height: "220px",
                          },
                          props: {
                            fit: "contain",
                            src: require("@/assets/images/finish.png"),
                          },
                        }),
                      ]
                    )
                  : null,
                createElement("el-link", {
                  domProps: {
                    innerHTML: "上传",
                  },
                  directives: [
                    {
                      name: "column-domItem-show",
                      value: !row.isRealComment,
                    },
                  ],
                  style: {
                    marginLeft: "20px",
                  },
                  props: { type: "primary" },
                  on: {
                    click: function () {
                      row.code13 = require("@/assets/images/finish.png");
                    },
                  },
                }),
                row.stockSpuName
                  ? createElement("el-link", {
                      domProps: {
                        innerHTML: "删除",
                      },
                      style: {
                        marginLeft: "20px",
                      },
                      props: { type: "danger" },
                      on: {
                        click: function () {
                          row.code13 = null;
                        },
                      },
                    })
                  : null,
              ]
            );
          },
        },
        {
          label: "规格名称",
          prop: "stockSkuSpec",
          editable: true,
        },
        {
          label: "物料SKU编码",
          prop: "stockSkuCode",
          editable: true,
        },
        {
          label: "退货单价",
          prop: "singlePrice",
          valueType: "number",
          render(createElement, params) {
            const { row } = params;
            return createElement("el-input", {
              props: {
                value: row.singlePrice,
              },
              on: {
                input: (param) => {
                  row.singlePrice = param;
                },
              },
            });
          },
        },
        {
          label: "商品条形码",
          prop: "stockBarCode",
          editable: true,
        },
        {
          label: "图片",
          prop: "stockSkuImage",
          render(createElement, params) {
            const _this = this;
            return createElement(
              "el-popover",
              {
                props: {
                  placement: "right-start",
                  trigger: "hover",
                },
              },
              [
                createElement("el-image", {
                  style: {
                    width: "50px",
                    height: "50px",
                  },
                  props: {
                    fit: "contain",
                    lazy: true,
                    src: require("@/assets/images/finish.png"),
                  },
                  slot: "reference",
                }),
                createElement("el-image", {
                  style: {
                    width: "220px",
                    height: "220px",
                  },
                  props: {
                    fit: "contain",
                    src: require("@/assets/images/finish.png"),
                  },
                }),
              ]
            );
          },
        },
        {
          label: "后台类目",
          prop: "stockClassifyNames",
        },
        {
          label: "品牌",
          prop: "stockBrandName",
          editable: true,
        },
        {
          label: "标准售价",
          prop: "stockSkuretailPrice",
          formatter(row) {
            return `￥${this.$transNum(row.stockSkuretailPrice)}`;
          },
          editable: true,
        },
        {
          label: "参考进价",
          prop: "stockSkuBuyPrice",
          formatter(row) {
            return `￥${this.$transNum(row.stockSkuBuyPrice)}`;
          },
          editable: true,
        },
        {
          label: "最后修改",
          prop: "updateTime",
          formatter(row) {
            return this.$moment(row.updateTime);
          },
        },
        {
          label: "创建时间",
          prop: "createTime",
          formatter(row) {
            return this.$moment(row.createTime);
          },
        },
        {
          label: "关联详情",
          prop: "code11",
        },
        {
          label: "状态",
          prop: "status",
          formatter(row) {
            return this.$filters.getOrderState(row.status);
          },
        },
        {
          label: "操作",
          prop: "operate",
          width: "250",
          fixed: "right",
          render(createElement, params) {
            const _this = this;
            return createElement(
              "div",
              {
                style: {
                  width: "100%",
                  display: "flex",
                  justifyContent: "center",
                  flexWrap: "wrap",
                },
              },
              [
                createElement("el-link", {
                  domProps: {
                    innerHTML: "修改",
                  },
                  style: {
                    marginRight: "20px",
                  },
                  props: { type: "primary" },
                  on: {
                    click: function () {},
                  },
                }),
                createElement("el-link", {
                  domProps: {
                    innerHTML: "删除",
                  },
                  style: {
                    marginRight: "20px",
                  },
                  props: { type: "danger" },
                  on: {
                    click: function () {},
                  },
                }),
                createElement("el-link", {
                  domProps: {
                    innerHTML: "打印",
                  },
                  style: {
                    marginRight: "20px",
                  },
                  props: { type: "success" },
                  on: {
                    click: function () {},
                  },
                }),
              ]
            );
          },
        },
      ],
      queryPageApi,
      pageNo: 1,
      limit: 10,
      queryParams: {},
      mergeColumn: [],
    };
  },

};
</script>


